<template>
  <div>
    <site-nav />
    <head-item />
    <CharactersDet
      :message="message"
      :freight="freight"
      :spu-detail-vo="spuDetailVo"
      :phone-dialog="phoneDialog"
      :way-title="wayTitle"
      @calculateFreight="calculateFreight"
      @openDetail="openDetail"
    />
    <ProductDet />
    <advantage-item />
    <guide-item />
    <friendly-link />
    <footer-item />
  </div>

</template>

<script>
import ProductDet from './component/ProductDetail'
import CharactersDet from './component/CharactersDetail'
import SiteNav from '../../layout/Nav'
import AdvantageItem from '../../layout/Advantage'
import GuideItem from '../../layout/Guide'
import FriendlyLink from '../../layout/FriendlyLink'
import FooterItem from '../../layout/Footer'
import { loadPhone } from '@/util/spuContantWay'
import HeadItem from '../home/component/Head.vue'
import { getCommodityDetail, freightPrepaid, goosBrowsingHistory, phoneBrowsingHistory } from '@/api/detail'
export default {
  name: 'Detail',
  components: {
    ProductDet,
    CharactersDet,
    SiteNav,
    AdvantageItem,
    GuideItem,
    FriendlyLink,
    FooterItem,
    HeadItem
  },
  data() {
    return {
      spuRepoId: this.$route.params.spuRepoId,
      spuId: '', // 商品id
      repositoryId: '', // 仓库id
      lat: '', // 商品信息维度
      lng: '', // 商品信息经度
      repositoryName: '', // 仓库名称
      sellerName: '', // 商家名称
      mainCategoryName: '', // 商品名称
      // 运费详情数据
      freight: {},
      // 详情页面数据
      message: {},
      spuDetailVo: {},
      phoneDialog: {
        open: false,
        data: {}
      },
      wayTitle: '',
      memberNum: ''
    }
  },
  mounted() {
    // this.spuRepoId = '493479197805928448'
    this.detailMsg()
    this.goodsHistory()
  },
  methods: {
    // 获取详情数据
    detailMsg() {
      getCommodityDetail(this.spuRepoId).then(res => {
        this.message = res.data
        this.spuDetailVo = res.data.spuDetailVo
        this.spuId = res.data.spuId // 商品id
        this.lat = res.data.lat // 商品信息维度
        this.lng = res.data.lng // 商品信息经度
        this.repositoryId = res.data.repositoryId // 仓库id
        this.repositoryName = res.data.repositoryName // 仓库名称
        this.sellerName = res.data.sellerName // 商家名称
        this.mainCategoryName = res.data.mainCategoryName // 商品名称
        this.calculateFreight()
      })
    },
    // 运费计算
    calculateFreight() {
      const params = {
        start: this.lat + ',' + this.lng,
        end: this.$route.params.end,
        spuId: this.spuId,
        reposityId: this.repositoryId,
        buyNum: this.$store.getters.buyNum === '' ? 1 : this.$store.getters.buyNum
      }
      freightPrepaid(params).then(res => {
        this.freight = res.data
      })
    },
    // 查看商家电话浏览记录追踪
    async phoneHistory() {
      const params = {
        onlyAccount: this.memberNum,
        id: this.repositoryId,
        productName: this.mainCategoryName,
        sellerName: this.sellerName,
        repositoryName: this.repositoryName,
        spuId: this.spuId
      }
      await phoneBrowsingHistory(params)
    },
    // 商品浏览记录追踪
    goodsHistory() {
      goosBrowsingHistory().then(res => {
        console.log(res)
      })
    },
    openDetail() {
      const spuId = this.spuId
      this.wayTitle = '联系方式'
      // 直接匿名函数搞定
      loadPhone(spuId, (data) => {
        this.phoneDialog.data = data
        console.log(this.phoneDialog.data, 'data')
        if (data.emergoyPhone) {
          this.phoneDialog.data.emergoyPhone = data.emergoyPhone.split(',')
        }
        this.phoneDialog.open = true
      }, onlyAccount => {
        this.memberNum = onlyAccount
      }, showLoginDialog => {
        this.loginDialog = true
      })
      this.phoneHistory()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
